<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="css/mui.css">
		<link rel="stylesheet" href="css/presoninfo.css">
		<script src="js/jquery-1.9.1.js"></script>
		<script src="js/mui.js"></script>
		<title>个人资料</title>
		<style>
		.mui-bar-nav{background: transparent;box-shadow: none;}
		.mui-bar-nav a{color:#333;}
		.mui-bar-nav h1{color:#333;text-align: center;}
		.mui-title{font-size: 15px;}
		.content{margin-top:44px;}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">个人资料</h1>
		</header>
		<div class="content">
			<div class="head">
				<div>
					<a id="userImg"  href="#">头像</a>
					<span><img src="img/head.png" alt=""></span>
				</div>
				<div>
					<h5>昵称：小明</h5>
					<span>高级VIP</span>
					<h6><i>13596606528（我的ID:123）</i></h6>
				</div>
			</div>
			<form action="" onsubmit="return checkForm()">
				<div class="info_list">
					<div class="list_info">
						<input type="text" class="edit" id="user_name" placeholder="您的姓名"/>
					</div>
				</div>
				<div class="info_list">
					<div class="list_info">
						<input type="text" class="edit" id="card_no" placeholder="您的身份证号"/>
					</div>
				</div>
				<div class="info_list" style="border-bottom:none;">
					<div class="list_left2">身份证上传<span>(请上传身份证正反面，图片保持清晰)</span></div>
				</div>
				<div class="id_img_wp">
					<input type="file" accept="image/*" onchange="getzImg(this)" style="display:none" value="" id="img_z" />
					<input type="file" accept="image/*" onchange="getfImg(this)" value="" id="img_f" style="display:none" />
					<div class="img_wp" onclick="zhengmian()">
						<img src="" id="zmz" />
						<p class="img_intro">身份证正面照</p>
						<div class="xjz">
							<img src="img/xiangji.png" alt="">
						</div>
					</div>
			
					<div class="img_wp" onclick="fanmian()">
						<img src="" id="fmz" />
						<p class="img_intro">身份证反面照</p>
						<div class="xjf">
							<img src="img/xiangji.png" alt="">
						</div>
					</div>
					
					<div class="cf"></div>
				</div>
				<p style="text-align:center;">
					<input type="submit" value="提交" class="save_btn" />
				</p>
			</form>
		</div>
		

		<script>
			$(function() {
				$('.img_wp img').height($('.img_wp img').width() * 0.6);
				$(window).resize(function() {
					$('.img_wp img').height($('.img_wp img').width() * 0.6);
				})
			})
			//正面
			function zhengmian() {
				$('#img_z').click();
				$(".xjz").css("display","none")
			}

			function getzImg(imgFile) {

				var file = imgFile.files[0];

				var reader = new FileReader();
				reader.readAsDataURL(file); //将文件读取为Data URL小文件   这里的小文件通常是指图像与 html 等格式的文件
				reader.onload = function(e) {
					$("#zmz").attr("src", e.target.result);
				}
			}

			//反面
			function fanmian() {
				$('#img_f').click();
				$(".xjf").css("display","none")
			}

			function getfImg(imgFile) {

				var file = imgFile.files[0];

				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e) {
					$("#fmz").attr("src", e.target.result);
				}
			}
			//申请
			function checkForm() {
				if ($('#user_name').val().length < 1) {
					$('#user_name').focus();
					alert('请输您的姓名');
					return false;
				}
				var cardNo = $('#card_no');
				if (cardNo.val() && /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(cardNo.val())) {

				} else {
					cardNo.focus();
					alert('身份证号码格式不正确！');
					return false;
				}
				if ($('#img_z').val() == null || $('#img_z').val() == '') {
					alert('请上传身份证正面照！');
					return false;
				}
				if ($('#img_f').val() == null || $('#img_f').val() == '') {
					alert('请上传身份证反面照！');
					return false;
				}
			}
		</script>
		
		 <script>
					 mui.plusReady(function(){
						document.getElementById('userImg').addEventListener('tap',function(){
							if(mui.os.plus){
								var a=[{
									title:'拍照'
								},{
									title:'从手机相册选择'
								}];
								plus.nativeUI.actionSheet({
									title:'修改头像',
									cancel:'取消',
									buttons:a
								},function(b){
									switch(b.index){
										case 0:
											break;
										case 1:
											//拍照
											getImages();
											break;
										case 2:
											//打开相册
											galleryImages();
											break;
										default:
											break;
									}
								},false);   
							}
						});
		
						//拍照
						function getImages(){
							var mobileCamera=plus.camera.getCamera();
							mobileCamera.captureImage(function(e){
								plus.io.resolveLocalFileSystemURL(e,function(entry){
									var path=entry.toLocalURL()+'?version='+new Date().getTime();
									uploadHeadImg(path);
								},function(err){
									console.log("读取拍照文件错误");
								});
							},function(e){
								console.log("er",err);
							},function(){
								filename:'_doc/head.png';
							});
						}
		
						//从本地相册选择
						function galleryImages(){
							console.log("你选择了从相册选择");
							plus.gallery.pick(function(a){
								plus.io.resolveLocalFileSystemURL(a,function(entry){
									plus.io.resolveLocalFileSystemURL('_doc/',function(root){
										root.getFile('head.png',{},function(file){
											//文件已经存在
											file.remove(function(){
												console.log("文件移除成功");
												entry.copyTo(root,'head.png',function(e){
													var path=e.fullPath+'?version='+new Date().getTime();
													uploadHeadImg(path);
												},function(err){
													console.log("copy image fail: ",err);
												});
											},function(err){
												console.log("删除图片失败：（"+JSON.stringify(err)+")");
											});
										},function(err){
											//打开文件失败
											entry.copyTo(root,'head.png',function(e){
												var path=e.fullPath+'?version='+new Date().getTime();
												uploadHeadImg(path);
											},function(err){
		
												console.log("上传图片失败：（"+JSON.stringify(err)+")");
											});
										});
									},function(e){
										console.log("读取文件夹失败：（"+JSON.stringify(err)+")");
									});
								});
							},function(err){
								console.log("读取拍照文件失败: ",err);
							},{
								filter:'image'
							});
						};
		
						//上传图片
						function uploadHeadImg(imgPath){
							//选中图片之后，头像当前的照片变为选择的照片
							var mainImg=document.getElementById('userImg');
							mainImg.src=imgPath;
		
		
							var images=new Image();
							images.src=imgPath;
							var imgData=getBase64Image(images);
							mui.ajax('http://127.0.0.1/uploadHeadImg',{
								data:{
									'imgDatas':imgData
								},
								dataType:'json',//服务器返回json格式数据
								type:'post',//HTTP请求类型
								timeout:10000,//超时时间设置为10秒；
								success:function(data){
									if(data.status=='1'){
										mui.alert('上传成功！');
									}
								},
								error:function(xhr,type,errorThrown){
									if(type=='timeout'){
										mui.alert('服务器连接超时，请稍后再试');
									}   
								}
							});
						}
		
		
						//压缩图片转成base64
						function getBase64Image(img){
							var canvas=document.createElement("canvas");
							var width=img.width;
							var height=img.height;
							if(width>height){
								if(width>100){
									height=Math.round(height*=100/width);
									width=100;
								}
							}else{
								if(height>100){
									width=Math.round(width*=100/height);
								}
								height=100;
							}
		
							canvas.width=width;
							canvas.height=height;
							var ctx=canvas.getContext('2d');
							ctx.drawImage(img,0,0,width,height);
		
							var dataUrl=canvas.toDataURL('image/png',0.8);
							return dataUrl.replace('data:image/png:base64,','');
						}   
					});
		</script>
	</body>
</html>
